<template>
  <!-- <view class="machineDetail"> -->
    <scroll-view scroll-y @scrolltolower="lower()" class="machineDetail">
    <pagehead>收益统计</pagehead>
    <view class="tab">
      <view v-for="(item, index) in tab" :key="index" :class="[currentIndex == index ? 'active' : '', 'item']"
        @tap="changeTab(index,item.status)">{{ item.name }}</view>
    </view>
    <!-- <view class="machineDetail-warn">
      <view>
        <image :src="IMAGE_STATIC+'/images/warn.png'" class="ico" mode="heightFix" />
        当日统计数据次日更新，月纬度不含当日数据。
      </view>
    </view> -->
    <view class="machineDetail-sort">
      <view class="info">
      <view class="label">开始时间</view>
      <view class="txt">
        <picker mode="date" :value="chooseObj.startDate" :start="startDateValid" end="2999-12-31"
          @change="startDatePicker">
          <view>{{ chooseObj.startDate ? chooseObj.startDate : '请选择' }}</view>
        </picker>
      </view>
      <image :src="IMAGE_STATIC+'/images/arrow-down.png'" class="ico" mode="heightFix" />
    </view>
    <view class="info border-b">
      <view class="label">结束时间</view>
      <view class="txt">
        <picker mode="date" :value="chooseObj.endData" :start="startDateValid" end="2999-12-31"
          @change="endDatePicker">
          <view>{{ chooseObj.endData ? chooseObj.endData : '请选择' }}</view>
        </picker>
      </view>
      <image :src="IMAGE_STATIC+'/images/arrow-down.png'" class="ico" mode="heightFix" />
    </view>
    </view>
    <view class="machineDetail-top">
      <view>共收益:<text class="price">{{ userTradeInfo.reward_num || 0 }}笔</text> 合计:<text class="price">{{userTradeInfo.reward_benefit || 0}}元</text></view>
    </view>
    <view v-if="isShowPage">
      <view class="machineDetail-list" v-if="list.length != 0">
        <view class="machineDetail-item" v-for="(item,index) in list" :key="index">
          <view class="top">
            <view class="name">{{tab[currentIndex].name}}</view>
            <view class="right">{{ (item.benefit) || 0 }}元
              <!-- <image :src="IMAGE_STATIC+'/images/arrow-right.png'" class="ico" mode="heightFix" /> -->
            </view>
          </view>
          <view class="info">
            <view class="label">机具SN号</view>
            <view class="des">{{ (item.sn_code) || '' }}</view>
          </view>
          <view class="info">
            <view class="label">商户名称</view>
            <view class="des">{{ (item.merchant_name ) || '' }}</view>
          </view>
          <view class="info">
            <view class="label">{{tab1[currentIndex].name}}时间</view>
            <view class="des">{{ (item.cre_date ) || '' }}</view>
          </view>
        </view>
      </view>
      <view class="initNoData" v-if="list.length == 0">—暂无内容—</view>
    </view>
    </scroll-view>
  <!-- </view> -->
</template>

<script>
export default {
  data() {
    return {
      IMAGE_STATIC: this.$url.assetsPath,
      currentIndex: 0,
      type: '',
      status:'01',
      pageIndex: 1,
      pageSize: 10,
      lastId: '',
      lsShow: true,
      isShowPage: true,
      tab: [
        { name: '交易奖励',status:'01' },
        { name: '激活奖励',status:'02' },
        { name: '达标奖励',status:'03' },
      ],
      tab1: [
        { name: '交易',status:'01' },
        { name: '激活',status:'02' },
        { name: '达标',status:'03' },
      ],
      total: 1,
      detail:{},
      list: [
        // { id: 1, price: '110', createtime: '2024-08-10' }
      ],
      statusBarHeight:0,
      modelSortShow: false,
      chooseObj: {  // 筛选条件
        startDate: this.getDateFirstLast('-'), //开始时间
        endData: this.getDateFirstLast('-',true)  //结束时间
      },
       // 选择时间范围
      startDateValid: '1900-01-01',
      userTradeInfo:{}
    };
  },
  onLoad(options) {
    if (options) {
      this.type = options.value1
    }
    this.init();
    const that = this
    //获取手机型号
    uni.getSystemInfo({
      success: function (res) {
      that.statusBarHeight = res.statusBarHeight//状态栏高度
      that.platform = res.platform//机型
      console.log('platform',that.platform ,',statusBarHeight',that.statusBarHeight)
      }
    });
  },
  // 下拉刷新
  onPullDownRefresh() {
    console.log('refresh');
    this.init();
    this.isLoadShow = true;
    setTimeout(function () {
      uni.stopPullDownRefresh();
    }, 500);
  },
  methods: {
    init() {
      this.pageIndex = 1
      this.pageSize = 10
      this.lastId = '';
      this.list = [];
      this.getTotal()
      this.getRecord();
    },
    // 切换
    changeTab(index,status) {
      if (this.currentIndex != index) {
        this.currentIndex = index
        this.status = status
        this.resFilds();
        this.init();
      }
    },
    // 获取总数
    getTotal(){
      var data = {
        oper_type:this.status,
        start_date:this.chooseObj.startDate,
        end_date:this.chooseObj.endData,
      };
      this.$Ajax('/api/record/reward/getUserRecordRewardTotal', data, res => {
        if (res.success) {
          this.userTradeInfo = res.data.userRecordRewardTotal
        }
      }, err => {
      }
      )
    },
    // 列表
    getRecord() {
      let that = this;
      var data = {
        oper_type:this.status,
        start_date:this.chooseObj.startDate,
        end_date:this.chooseObj.endData,
        last_id:this.lastId
      };
      console.log("data", data);
      uni.showLoading({
        mask: true
      })
      that.$Ajax('/api/record/reward/getUserRecordRewardList', data, res => {
        uni.hideLoading();
        that.isShowPage = true;
        // this.detail = res.data
         that.list = that.list.concat(res.data.userRecordRewardList);
        console.log('list', this.list)
        if(res.data.userRecordRewardList.length>0){
          this.lastId = res.data.userRecordRewardList[res.data.userRecordRewardList.length-1].id
          this.lsShow = true
        }else{
          this.lsShow = false
        }
      }, err => {
        uni.hideLoading();
        that.isShowPage = true;
      }
      );
    },
    // 开始时间选择
    startDatePicker(e) {
      // 获取用户选择的日期
      // this.chooseObj.startDate = e.detail.value;
      const time = e.detail.value;
      console.log('选择的日期：', e.detail.value);
      if (new Date(time) > new Date(this.chooseObj.endData)) {
        this.chooseObj.startDate = this.chooseObj.endData; // 重置开始时间
      } else {
        this.chooseObj.startDate = time;
      }
      this.init();
    },
    // 结束时间选择
    endDatePicker(e) {
      // 获取用户选择的日期
      // this.chooseObj.endData = e.detail.value;
      const time = e.detail.value;
      console.log('选择的日期：', e.detail.value);
      if (new Date(time) < new Date(this.chooseObj.startDate)) {
        this.chooseObj.endData = this.chooseObj.startDate; // 重置开始时间
      } else {
        this.chooseObj.endData = time;
      }
      this.init();
    },
     // 重置
    reset() {
      this.resFilds()
      this.modelSortShow = false
      this.init()
    },
    sure(){
      this.modelSortShow = false
      this.init()
    },
    // 清空数据
    resFilds(){
      this.chooseObj = {  // 筛选条件
        startDate: this.getDateFirstLast('-'), //开始时间
        endData: this.getDateFirstLast('-',true)  //结束时间
      }
    },
    lower() {
      console.log("分页");
      if (this.lsShow == true) {
        this.getRecord();
      } else {
        // return this.$tools.toast('到底了');
      }
    }
  },
};
</script>

<style lang="scss" scoped>
.machineDetail {
  position: relative;
  min-height: 100vh;
  height: 100%; /* 显式设置父元素高度 */
  padding-bottom: 20rpx;
  .tab {
    @include flexBetween;
    background: #FFFFFF;
    box-shadow: inset 0rpx 1rpx 0rpx 0rpx #E7E7E7;

    .item {
      width: 50%;
      text-align: center;
      height: 96rpx;
      line-height: 96rpx;
      font-size: 32rpx;
      color: rgba(0, 0, 0, 0.6);
    }

    .active {
      font-weight: 600;
      font-size: 32rpx;
      color: #333333;
      position: relative;
    }

    .active::before {
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-40rpx);
      content: '';
      width: 80rpx;
      height: 8rpx;
      background: #AD2926;
      border-radius: 70rpx;
    }
  }

  .machineDetail-warn {
    @include flexBetween;
    overflow: hidden;
    width: 100%;
    margin: auto;
    padding: 32rpx 24rpx;
    font-size: 28rpx;
    background: #FFF5EF;
    color: #ED7B2F;
    .ico {
      width: 32rpx;
      height: 32rpx;
      display: inline-block;
      vertical-align: middle;
      margin-left: 8rpx;
    }
  }
  &-sort{
    @include flexBetween;
    overflow: hidden;
    width: 93.6%;
    margin: auto;
    margin-top: 20rpx;
    font-size: 28rpx;
    color: #333;
    position: relative;
    box-sizing: border-box;
    .info{
      @include flexLeft;
      .label{
        font-weight: 500;
        font-size: 28rpx;
        color: #333;
      }
    }
    .ico {
      width: 32rpx;
      height: 32rpx;
      display: inline-block;
      vertical-align: middle;
      margin-left: 8rpx;
    }

    .right {
      @include flexLeft;
    }

    .txt {
      margin-left: 14rpx;
    }
  }
  &-top{
    width: 93.6%;
    margin: auto;
    margin-top: 20rpx;
    @include flexLeft;
    font-size: 26rpx;
    color: rgba(51,51,51,0.6);
    .price{
      font-weight: 500;
      font-size: 28rpx;
      color: #333;
      margin-right: 20rpx;
    }
  }
  &-scroll {
    overflow: hidden;
    height: 100%;
  }

  &-item {
    overflow: hidden;
    width: 93.6%;
    margin: auto;
    background: #fff;
    border-radius: 16rpx;
    padding: 32rpx 0;
    margin-top: 24rpx;
    font-size: 24rpx;
    color: #000000;

    .top {
      @include flexBetween;
      padding: 0 28rpx;
      padding-bottom: 32rpx;
      border-bottom: 1px solid rgba(0, 0, 0, 0.08);

      .name {
        font-size: 28rpx;
      }
    }

    .ico {
      width: 32rpx;
      height: 32rpx;
      display: inline-block;
      vertical-align: middle;
      margin-left: 8rpx;
    }

    .info {
      @include flexBetween;
      padding: 0 28rpx;
      margin-top: 24rpx;

      .label {
        font-size: 28rpx;
        color: #999999;
      }
    }
  }

  image {
    width: 100%;
    height: 100%;
  }
}
.modal{
}
.modal .sortPopu .bottom-box{
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
}
</style>
